<template>
    <div class="cont">
        <van-popup v-model="show" position="bottom" close-on-popstate round @close="close">
            <div class="p-20 content">
                <div class="text-center m-b-20 font-16 text-bold">新建关键词</div>
                <div class="flex align-center p-tb-20">
                    <div class="add-left">绑定群：</div>
                    <van-field readonly :value="form.value" label-width="0" placeholder="点击选择群"
                        @click="showPicker = true" />
                </div>

                <div class="flex align-center p-tb-20 van-hairline--top">
                    <div class="add-left">关键词：</div>
                    <van-field v-model="form.title" label-width="0" placeholder="请输入关键词" />
                </div>
                <div class="flex align-center p-tb-20 van-hairline--top">
                    <div class="add-left">回复类型：</div>
                    <van-radio-group class="m-l-10" v-model="form.reply_type" direction="horizontal">
                        <van-radio :name="0">文字</van-radio>
                        <van-radio :name="1">图片</van-radio>
                    </van-radio-group>
                </div>
                <div class="flex m-b-20 p-t-20 van-hairline--top" v-if="form.reply_type == 0">
                    <div class="add-left">回复语：</div>
                    <van-field v-model="form.reply" type="textarea" rows="6" autosize label-width="0"
                        placeholder="请输入回复语" />
                </div>
                <div v-else class="flex m-b-20 p-t-20 van-hairline--top">
                    <div class="add-left">上传图片：</div>
                    <div class="bg-grey flex align-center justify-center upload-img radius4" @click="uploadImg">
                        <img v-if="form.imgSrc" :src="form.imgSrc" alt="">
                        <van-icon v-else size="26" name="photo-o" color="#dcdee0" />
                    </div>
                </div>
                <div @click="confrim()"
                    class="bottom-btn p-t-10 p-b-10 text-center color-white bg-green">保存设置</div>
            </div>
        </van-popup>
        <van-popup v-model="showPicker" position="bottom">
            <div class="text-center font-16 p-tb-20 text-bold">选择群</div>
            <div class="group-content">

                <van-checkbox-group v-model="form.result" v-if="groupList && groupList.length > 0">
                    <van-cell-group>
                        <!-- <van-cell title="全部群" @click="toggle({}, 1)">
                            <template #right-icon>
                                <van-checkbox name="" ref="checkboxes" />
                            </template>
                        </van-cell> -->
                        <van-cell v-for="(item, index) in groupList" :key="index" :title="item.nick_name">
                            <template #right-icon>
                                <van-checkbox :name="item.user_name" @click="checkChange" />
                            </template>
                        </van-cell>
                    </van-cell-group>
                </van-checkbox-group>
                <noData v-else text="暂无激活的群" />
            </div>
            <div class="footer flex align-center justify-end van-hairline--top">
                <van-button class="p-lr-12 radius4" plain size="small" @click="showPicker = false">取消</van-button>
                <van-button class="m-l-30 m-r-15 p-lr-12 radius4" size="small" type="info"
                    @click="onConfirm()">确定</van-button>
            </div>
        </van-popup>
    </div>
</template>

<script>
import { Popup, Field, RadioGroup, Radio, Picker, Checkbox, CheckboxGroup, Cell, CellGroup, Button } from 'vant'
export default {
    components: {
        [Popup.name]: Popup,
        [Field.name]: Field,
        [RadioGroup.name]: RadioGroup,
        [Radio.name]: Radio,
        [Picker.name]: Picker,
        [Checkbox.name]: Checkbox,
        [CheckboxGroup.name]: CheckboxGroup,
        [Cell.name]: Cell,
        [CellGroup.name]: CellGroup,
        [Button.name]: Button
    },
    props: {
        popupVisible: {
            type: Boolean,
            default: false
        },
        isNeed: {
            type: Boolean,
            default: false
        },
        id: {
            type: [Number, String],
            default: 0
        },
        list: {
            type: Array,
            default: () => {
                return []
            }
        },
        keywordData: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    data () {
        return {
            show: this.popupVisible,
            showPicker: false,
            groupList: this.list,
            form: {
                reply_type: 0,
                title: '',
                reply: '',
                value: '',
                result: [],
                user_name: '',
                imgSrc: '',
                id: 0
            }

        }
    },
    mounted () {
        if (this.keywordData && this.keywordData.id) {
            this.form = this.keywordData
            this.form.imgSrc = this.keywordData.reply_type == 1 ? this.keywordData.reply : ''
            this.form.result = this.keywordData.user_name.split(',')
            this.form.value = this.keywordData.user_name_info.map(item => item.nick_name).join(',')
            this.form.reply = this.keywordData.reply_type == 1 ? '' : this.keywordData.reply
            this.form.id = this.keywordData.id
        } else {
            this.form.id = this.id
        }
        if (this.isNeed) {
            this.getList()
        }
    },
    methods: {
        getList () {
            this.$api.getListGroup({ group_type: 2, status: 1, page: 1, pagesize: 30 }, true).then(async res => {
                if (res.code != 1) {
                    return this.$toast(res.msg)
                }
                this.groupList = res.data.list
            })
        },
        close () {
            this.$emit('close')
        },
        confrim () {
            if (!this.form.user_name) {
                return this.$toast('请先选择群')
            }
            if (!this.form.title) {
                return this.$toast('关键词不能为空')
            }
            if (this.form.reply_type == 0 && !this.form.reply) {
                return this.$toast('关键词回复内容不能为空')
            }
            if (this.form.reply_type == 1 && !this.form.imgSrc) {
                return this.$toast('请上传图片')
            }
            this.$api.keywordAddOrUpdate({
                id: this.form.id,
                username: this.form.user_name,
                title: this.form.title,
                reply: this.form.reply_type == 0 ? this.form.reply : this.form.imgSrc,
                reply_type: this.form.reply_type,
                status: 1
            }).then(res => {
                if (res.code != 1) {
                    return this.$toast(res.msg)
                }
                this.$toast(this.form.id ? '修改成功' : '创建成功')
                if (this.form.id) {
                    this.$emit('close', this.form)
                } else {
                    this.$emit('close', true)
                }
            })
        },
        checkChange (e) {
            this.$forceUpdate()
        },
        onConfirm () {
            if (this.form.result && this.form.result.length == 0) {
                return this.$toast('至少选择一个群')
            }
            this.form.user_name = this.form.result.join(',')
            let arr = []
            this.groupList.forEach(item => {
                this.form.result.forEach(opt => {
                    if (item.user_name == opt) {
                        arr.push(item)
                    }
                })
            })
            this.form.value = arr.map(item => item.nick_name).join(',')
            this.showPicker = false
        },
        uploadImg () {
            this.DS.call('DS.uploadLocalPhoto', (res) => {
                this.form.imgSrc = res
            })
        }
    }
}
</script>
<style lang="less" scoped>
.cont {
    .content {
        ::v-deep .van-cell {
            // background-color: #fff;
            width: 64%;
            margin-left: 10px;
            border-radius: 8px;
            padding: 0;
        }
    }


    .upload-img {
        width: 80px;
        height: 80px;

        img {
            width: 100%;
        }
    }

    .bottom-btn {
        border-radius: 40px;
    }

    .group-content {
        height: 400px;
        overflow-y: auto;
        padding-bottom: 50px;
    }

    .footer {
        position: fixed;
        background-color: #fff;
        left: 0;
        right: 0;
        bottom: 0;
        height: 50px;
    }
}
</style>